<template>
	<div class="app">
		<h2>{{ counter }}</h2>
		<button @click="counter++">+1</button>
		<home v-if="isShowHome"></home>
		<button @click="isShowHome = !isShowHome">显示/隐藏</button>
	</div>
</template>

<script>
import Home from './components/Home.vue'

export default {
	components: {
		Home,
	},
	data() {
		return {
			counter: 0,
			isShowHome: true,
		}
	},
	// 1. 组件被创建之前
	beforeCreate() {
		console.log('beforeCreated')
	},
	created() {
		console.log('created')
		console.log('1.发送网络请求, 请求数据')
		console.log('2.监听eventBus事件')
		console.log('3.监听watch数据')
	},
	// 3. 组件template准备被挂载
	beforeMount() {
		console.log('beforeMount')
	},
	// 4. 组件template被挂载
	mounted() {
		console.log('mounted')
		console.log('1.获取DOM')
		console.log('2. 使用DOM')
	},
	// 5. 数据更新
	// 5.1 准备更新DOM
	beforeUpdate() {
		console.log('beforeUpdate')
	},
	// 5.2 更新DOM
	updated() {
		console.log('update')
	},
}
</script>

<style scoped></style>
